<template>
  <div class="goodsdetail">
    <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="goback"/>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in tabInfo.gallery" :key="item.id">
        <img :src="item.img_url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="seller-commit">
      <div class="commitbox">
        <p class="circle"></p>
        <p class="commit">30天无忧退货</p>
      </div>
      <div class="commitbox">
        <p class="circle"></p>
        <p class="commit">48小时快速退款</p>
      </div>
      <div class="commitbox">
        <p class="circle"></p>
        <p class="commit">满88元免邮费</p>
      </div>
    </div>

    <div class="goods-detail">
      <p class="detail-name">{{ goodsinfo.name }}</p>
      <p class="detail-brief">{{ goodsinfo.goods_brief }}</p>
      <p class="detail-price">￥{{ goodsinfo.retail_price }}</p>
      <div class="buy">
        <p>请选择规格数量</p>
        <img src="@/assets/selected.png" alt="" />
      </div>
    </div>

    <div class="attribute">
      <p class="attribute-title">商品参数</p>
      <div class="attribute-content">
        <div
          class="attribute-item"
          v-for="item in tabInfo.attribute"
          :key="item.id"
        >
          <p class="item-name">{{ item.name }}</p>
          <p class="item-value">{{ item.value }}</p>
        </div>
      </div>
    </div>

    <!-- <img class="primary_pic_url" :src="goodsinfo.primary_pic_url" alt="" />
    <div class="goods_desc" v-html="goodsinfo.goods_desc"></div> -->

    <div class="question">
      <p class="question-title">常见问题</p>
      <div class="question-content">
        <div class="content-item" v-for="item in tabInfo.issue" :key="item.id">
          <p class="item-question">
            <span></span>
            {{ item.question }}
          </p>
          <p class="item-answer">{{ item.answer }}</p>
        </div>
      </div>
    </div>

    <div class="category-list">
      <div class="category-item">
        <p class="item-title">大家都在看</p>
        <div class="item-flex">
          <div
            class="item"
            v-for="item in tabInfo.productList"
            :key="item.id"
            @click="goGoodsdetail(item.id)"
          >
            <img :src="item.list_pic_url" alt="" />
            <p class="item-name">{{ item.name }}</p>
            <p class="item-price">¥{{ item.retail_price }}</p>
          </div>
        </div>
      </div>
    </div>

    <van-goods-action class="goods-action">
      <div class="icon-wrapper">
        <van-goods-action-icon
          icon="star-o"
          @click="changecollect"
          :color="tabInfo.collected ? '#CEA62A' : ''"
        />
        <van-goods-action-icon
          icon="cart-o"
          :badge="this.allnumber"
          @click="gocart"
        />
      </div>
      <div class="btn-container">
        <van-goods-action-button
          type="warning"
          color="#CEA62A"
          text="加入购物车"
          class="btn"
          @click="joinCart"
        />
        <van-goods-action-button
          type="danger"
          color="#A04C19"
          text="立即购买"
          class="btn"
        />
      </div>
    </van-goods-action>

    <van-popup class="choose-quantity-wrapper" v-model="show" position="bottom">
      <img :src="goodsinfo.primary_pic_url" alt="" />
      <div class="quantity-info">
        <p>
          价格: <span>¥{{ goodsinfo.retail_price }}</span>
        </p>
        <p>数量:</p>
        <van-stepper v-model="value" />
      </div>
      <van-icon class="chooseback" name="cross" @click="chooseback" />
    </van-popup>
  </div>
</template>

<script>
import {
  detailaction,
  addcollect,
  addCart,
} from "@/api/category/goodsdetail/index";
export default {
  name: "WorkspaceJsonIndex",

  data() {
    return {
      tabInfo: [],
      goodsinfo: {},
      show: false,
      value: 1,
      allnumber: "",
    };
  },

  created() {
    this.init();
  },

  mounted() {},

  methods: {
    gocart() {
      this.$router.push("/cart");
    },
    chooseback() {
      this.show = false;
    },
    init() {
      detailaction({
        id: this.$route.query.id,
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        this.tabInfo = res;
        console.log(res);
        this.allnumber = res.allnumber;
        this.goodsinfo = res.info;
      });
    },
    backhome() {
      this.$router.go(-1);
    },
    onClickButton() {},
    changecollect() {
      addcollect({
        goodsId: this.$route.query.id,
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
        this.init();
      });
    },
    joinCart() {
      if (this.show) {
        addCart({
          goodsId: this.$route.query.id,
          number: this.value,
          openId: localStorage.getItem("openId"),
        }).then((res) => {
          console.log(res);
          this.init();
          this.$notify({
            message: "添加购物车成功",
            type: "success",
          });
        });
      } else {
        this.show = !this.show;
      }
    },

    goGoodsdetail(val) {
      this.$router.push({
        name: "categoryGoodsdetail",
        query: {
          id: val,
        },
      });
    },
    goback(){
      this.$router.go(-1)
    }
  },
};
</script>

<style scoped lang="scss">
@import "../scss/goodsdetail/index.scss";
* {
  margin: 0;
  padding: 0;
}
</style>